<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户反馈系统-文章详情</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link href="/ksp/layui/css/layui.css" rel="stylesheet">
<script type="text/javascript" src="/ksp/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/ksp/layui/layui.all.js"></script>
<script type="text/javascript" src="/ksp/js/ksp.com.js"></script>
<script type="text/javascript" src="/ksp/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ksp/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/ksp/ueditor/lang/zh-cn/zh-cn.js"></script>

<style type="text/css">
.reparea{
	background-color:#d2d2d2 !important;
	padding:10px;
	width:90%;

}
.cmtttl{
	font-weight:bold;
}

</style>

<script type="text/javascript">
	var element;
	var laypage;
	var artTch;
	var layer;

	layui.use(["element", "laypage", "layer"], function() {
		element = layui.element;
		laypage = layui.laypage;
		layer = layui.layer;
	})

	function iniParam() {
		artTch = getUrlPam("arttch");
	}
	
	function iniArtDetail() {
		var req = {"TTL_TCH" : artTch};
		$.ajax({
			 url : "/ksp/art/KSPA04"
			,type : "get"
			,dataType : "json"
			,data : req
			,success : function(res) {
				if (res.cod == "200") {
					var artArr = eval(res.jdt);
					var art = artArr[0];
					var ttlHtml = '<div>' + art.TTL_TTL + '</div>'
						+ '<div>' + art.CRT_USR + '发布时间' + art.CRT_TIM
						+ '|<span>浏览量<span id="sScaCnt"></span>&nbsp;' + '|留言数<span id="sGodCnt"></span></div><hr>'; 
						$("#divTtl").html(ttlHtml);
						$("#divCon").html(art.CON_CON);
						$("#sScaCnt").html(art.SCA_CNT);
						$("#sGodCnt").html(art.GOD_CNT);
						
				}
				
			}
		});
	}
	
	function repToCmt(cmtTch) {
		var cmtT = cmtTch;
		$("#txtRep").val("").show();
		layer.open({
			 type : 1
			,title : "回复" + cmtT
			,shadeClose : false
			,shade : false
			,maxmin :false
			,area : ['700px', '250px']
			,content : $("#divRep")
			,btn : ['确定', '取消']
			,yes : function (index, layero) {
				var REP_CON = $("#txtRep").val();
				var dtaArr = cmtTch.split(",");
				var req = {
						"COO_TKN" : getCookie("COO_TKN"),
						"CMT_TCH" : dtaArr[0],
						"TOO_OAM" : dtaArr[1],
						"TOO_USR" : dtaArr[2],
						"REP_CON" : REP_CON
				}
				$.ajax({
					url : "/ksp/rep/KSPR01?rn=" + Math.floor(Math.random() * 100 + 1)
				   ,type : "post"
				   ,dataType : "json"
				   ,data : req
				   ,async: false
				   ,success : function(res) {
					   if (res.cod == "200") {
						   qryArtCmt();
					   } else {
						   var msg = res.msg;
						   layer.msg(msg, {time:1500});
					   }
					   $("#txtRep").val("").hide();
				   }
					
				});
				
				layer.close(index);
			}
		});
	}
	
	function qryUsr(oam) {
		window.location.href="/ksp/p/usrcen?id=" + oam;
	}
	
	function qryAllRep(cmtTch) {
		window.location.href="/ksp/p/cmt/replst?id=" + cmtTch;
	}
	
	//展示评论回复的数据
	var flr = "0";
	var reprcd  = 1;
	
	function showCmtLst(data) {
		var cmtArr = data;
		var cmtHtml = "<ul>";
		var cmtflor;
		for (var i = 0; i < cmtArr.length; i++) {
			var C = cmtArr[i];
			var cmtPam = C.CMT_TCH + ',' + C.CMT_OAM + ',' + C.CMT_USR;
			var repPam = C.CMT_TCH + ',' + C.FRO_OAM + ',' + C.FRO_USR;
			var rnum = C.ROW_NUM;
			var repTch = C.REP_TCH;
			
			//评论楼层标识
			var flrTag;
			if (rnum == "1") {
				flrTag = "沙发";
			}else if (rnum == "2") {
				flrTag = "地板";
			} else {
				flrTag  = rnum;
			}
			
			var flrCmtInfdbg = '<li><div><div class="cmtttl"># ' + flrTag + '&nbsp;&nbsp;'
				+ C.CMT_OAM + '-' + C.CMT_USR + '&nbsp;&nbsp;发表于： ' + C.CMT_DTA
				+ '&nbsp;&nbsp; <a href="javascript:repToCmt(\'' + cmtPam + '\');">回复</a></div>'
				+ '<div>' + C.CMT_CON + '</div>';
			var flrCmtInfEnd = "</div> <hr /> </li>";
			
			var flrRepInfDbg = '<div class="reparea"><ul>';
			
			var flrRepInf = '<li>' 
				+ '<a href="javascript:qryUsr(\"' + C.FRO_OAM + '\");">' + C.FRO_USR
				+ '</a> &nbsp; 回复  &nbsp;'
				+ '<a href="qryUsr(\"' + C.TOO_OAM + '\");">' + C.TOO_USR + '</a>:'
				+ C.REP_CON
				+ '<a href=\'javascript:repToCmt(\"' + repPam + '\");\'>&nbsp&nbsp回复</a></li>';
			
			var flrRepInfEnd = '</ul></div>';
			
			var flrRepInfMore = '<div><a href=\'javascript:qryAllRep(\"' + C.CMT_TCH + '\")\'>查看全部</a></div>';
			
			/* 楼层的初始值为0，行号1
			楼层数！= 行号
			将行号赋值给楼层 */
			if (flr != rnum && reprcd > 1 && reprcd <= 4) {
				reprcd = 1;
				cmtHtml += flrRepInfEnd + flrCmtInfEnd;
			}
			
			if (flr != rnum) {
				cmtHtml += flrCmtInfdbg;
				flr = rnum;
				if (repTch != '' && typeof(repTch) != 'undefined') {
					if (reprcd < 4) {
						cmtHtml += flrRepInfDbg + flrRepInf;
						reprcd ++;
					} else {
						cmtHtml += flrRepInfMore + flrRepInfEnd;
						reprcd = 1;
					}
				} else {
					cmtHtml += flrCmtInfEnd;
					reprcd = 1;
				}
			} else {
				if (repTch != '' && typeof(repTch) != 'undefined') {
					if (reprcd < 4) {
						cmtHtml += flrRepInf;
						reprcd ++;
					} else {
						cmtHtml += flrRepInfMore + flrRepInfEnd;
						reprcd = 0;
					}
				} else {
					cmtHtml += flrCmtInfEnd;
				}
			}
			
			if (reprcd == 0) {
				
				cmtHtml += flrCmtInfEnd;
				reprcd = 1;
			}
		}
		cmtHtml += '</ul>';
		$("#divCmtLst").html(cmtHtml);
	}

	function qryCmtPge(curr, sortyp) {
		var req = {
				 "DTA_PGE" : curr|| 1
				,"DTA_LMT" : 20
				,"SOR_TYP" : sortyp
				,"TTL_TCH" : artTch
		};
		$.ajax({
			 url: "/ksp/cmt/KSPM02"
			,type : "post"
			,dataType : "json"
			,data : req
			,success : function (res) {
				var artArr = res.data;
				showCmtLst(artArr);
				laypage.render({
					 elem : "divCmtPge"
					,count : res.count
					,limit : 20
					,first : "首页"
					,last : "尾页"
					,layout:['count', 'prev', 'page', 'next', 'skip']
				    ,skip : true
				    ,curr : curr || 1
				    ,jump : function (obj, first) {
				    	console.log(obj);
				    	if (!first) {
				    		qryCmtPge(obj.curr, $("#hidTyp").val());
				    	}
				    }
				});
			}
		});
	}
	
	function qryArtCmt() {
		qryCmtPge(1, $("#hidTyp").val());
	}
	
	function chgCmtSeq(typ) {
		flr = "0";
		if (typ == "1") {
			$("#hidTyp").val("DESC");
		} else {
			$("#hidTyp").val("ASC");
		}
		qryArtCmt();
	}
	
	function iniCmt() {
		UE.getEditor("txtCmt",{
			toolbars: [[
			             /*  'fullscreen',  */'source', '|', 'undo', 'redo', '|',
			              /* 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
			              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
			              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
			              'directionalityltr', 'directionalityrtl', 'indent', '|',
			              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
			              'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
			               */
			               'simpleupload', 'insertimage', 'emotion', 'scrawl'
			               /* , 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
			              'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
			              'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
			              'print', 'preview', 'searchreplace', 'help', 'drafts' */
			          ]],
			elementPathEnabled: false,
			wordCount: false,
			serverUrl:"/ksp/uedi",
			zIndex : 0
		});
		
		//查询文章评论
		qryArtCmt();
		
		//文章评论新增操作
		$("#bCmt").click(function() {
			var cmtCon = UE.getEditor("txtCmt").getContent();
			var req = {
					"COO_TKN" : getCookie("COO_TKN"),
					"TTL_TCH" : getUrlPam("arttch"),
					"CMT_CON" : cmtCon
			}
						
			$.ajax({
				 url : "/ksp/cmt/KSPM01"
				,type : "post"
				,dataType : "json"
				,data : req
				,success: function(res) {
					if (res.cod == "200") {
						window.location.reload();
					} else {
						alert(res.msg);
					}
				}
			});
		});
	}
	
	function iniSca() {
		var req = {
				"TTL_TCH" : getUrlPam("arttch")
		};
		
		$.ajax({
			 url: "/ksp/art/KSPA05"
			,type : "post"
			,dataType : "json"
			,data : req
			,success : function(res) {
				if (res.cod == "200") {
					var artArr = eval(res.jdt);
					var art = artArr[0];
					
					$("#sScaCnt").html(art.SCA_CNT);
					$("#sGodCnt").html(art.GOD_CNT);
				} else {
					
				}
			}
			
			
		});
	}
	
</script>

<script type="text/javascript">
	$(function() {
		iniNar();
		iniParam();
		iniArtDetail();
		iniCmt();
		iniSca();
	});
</script>

</head>
<body>
	<!-- 导航栏 -->
	<div id="navDiv"></div>

	<div style="background-color: rgb(192, 192, 192)">
		<!-- 导航 -->
		<div style="background-color: #eff">
			<a href="/ksp/index">首页</a> -> <a href="/ksp/p/art/artlst">文章</a>详情
		</div>

		<!-- 正文 -->
		<div style="width: 1300px; height: 100%">
			<div
				style="padding-top: 20px; padding-left: 50px; background-color: #fff;">
				<div>
					<div id="divTtl"></div>
					<hr>
					<div id="divCon"
						style="min-height: 500px; *+ height: 100%; _height: 500px;"></div>
					<hr>

					<div>
						<div style="padding-bottom: 10px;">
							<div>
								<textarea id="txtCmt" class="layui-inline"
									style="width: 800px; height: 80px;"></textarea>
								<input class="layui-btn layui-inline"
									style="vertical-align: bottom; width: 100px;" id="bCmt"
									value="发表评论">
							</div>

							<!-- 回复初始化一个窗口 -->
							<div id="divRep" style="display: none; padding: 20px;">
								<textarea id="txtRep" style="width: 600px; height: 100px;"></textarea>
							</div>

						</div>
					</div>

				</div>

			</div>
		</div>

		<!-- 评论回复区 -->
		<div style="height: 10px; background-color: rgb(192, 192, 192)"></div>
		<div style="width: 1300px; height: 100%;">
			<div
				style="padding-top: 20px; padding-left: 50px; background-color: #fff">
				<div>
					全部评论&nbsp;&nbsp; <a href="javascript:chgCmtSeq('1')"> 热度</a>|<a
						href="javascript:chgCmtSeq()">时间</a> <input type="hidden"
						id="hidTyp" value="DESC">
				</div>

				<div id="divCmtLst">
					<ul>
						<li>
							<div>
								<div>评论人id，姓名 发表于：时间 #1</div>
								<div>评论内容 回复</div>
							</div>
						</li>
					</ul>

				</div>

			</div>

			<div id="divCmtPge" style="padding-bottom: 50px;"></div>
			<div>查看全部的评论</div>
			<div>
				<ul>
					<li>
						<div>
							<div>
								#1 (cmt_tch1) 80244299,杨盼盼发表于：时间 <a
									href="javascript:repToCmt('登录人回复杨盼盼')">回复a</a>
							</div>
							<div>这篇文字很棒</div>
							<div
								style="background-color: #d2d2d2!import; padding: 10px; width: 90%">
								<ul>
									<li><a href="javascript:qryUsr('登录人回复姓名1');"></a></li>

								</ul>


							</div>


						</div>

					</li>
				</ul>
			</div>

		</div>


	</div>

	<div style="width: 1000px; padding: 10px;">
		<button class="layui-btn" style="width: 120px; border: none;"
			data-type="getRec" id="bRec">推荐</button>
		<button class="layui-btn" style="width: 120px; border: none;"
			data-type="getLat" id="bLat">最新</button>
		<input type="hidden" id="hidTyp">

		<button class="layui-btn" style="width: 120px; float: right;"
			data-type="addTtl">发表主题</button>

		<div style="padding-left: 40px; padding-top: 20px;">
			<div id="divArtLst">
				<ul>
					<li>
						<div>
							<a href="/ksp/p/art/artdta?arttch=">标题</a>
						</div>
						<div>
							发表人 发表时间 <span>浏览量</span>|<span>留言数量</span>
						</div>
						<hr>
					</li>
					<li>
						<div>
							<a href="/ksp/p/art/artdta?arttch=">标题</a>
						</div>
						<div>
							发表人 发表时间 <span>浏览量</span>|<span>留言数量</span>
						</div>
						<hr>
					</li>
					<li>
						<div>
							<a href="/ksp/p/art/artdta?arttch=">标题</a>
						</div>
						<div>
							发表人 发表时间 <span>浏览量</span>|<span>留言数量</span>
						</div>
						<hr>
					</li>
				</ul>
			</div>

			<!-- 分页插件 -->
			<div>
				<div id="page1"></div>
			</div>
		</div>
	</div>
</body>
</html>